<template>
    <view ref="uv-back-top">
		<view v-if="(data_base || null) != null" class="page-bottom-fixed" :class="(is_single_page == 1 ? ' single-page-top' : '')">
			<!-- #ifdef APP-PLUS -->
			<!-- 右侧icon -->
			<view v-if="(plugins_fccprouniapp_data || null) != null && (plugins_fccprouniapp_data.base || null) != null && (plugins_fccprouniapp_data.base.is_app_home_share || null) != null && parseInt(plugins_fccprouniapp_data.base.is_app_home_share) === 1" class="top-share-right-icon">
				<uni-icons type="redo" size="20" color="#333" class="icon round cp" @tap="popup_share_event"></uni-icons>
			</view>
			<!-- #endif -->
			
			<!-- #ifdef MP-WEIXIN || MP-QQ || MP-KUAISHOU || H5 || APP-PLUS -->
			<!-- 小导航 -->
			<view class="top-nav-left-icon pf dis-none" :style="'top:' + top_nav_icon_top_value + 'px;'">
				<uni-icons type="arrow-left" size="22" color="#333" class="icon round cp" @tap="top_nav_left_back_event"></uni-icons>
			</view>
			<!-- #endif --> 
			 
			<component-tj-header :propBaseData="data_base" propHeaderType="1" :propBannerList="slide_list" :propRightIcon="right_icon_list" @onLocationBack="user_back_choice_location" :propMofang="plugins_fccprouniapp_mofang" :propSearchFixed="search_is_fixed" :propRandom="random_value" propFrom="companyshop" :diyTheme="diytheme" propUrl="/pages/fcc/classinfo/companyshop/companyshop" :propPlaceholder="$t('fengcheche.classinfo.sousuots')"></component-tj-header>
			
			<view class="huandeng_and_nav pr"> 
				<view class="icon-nav-list">
					<view v-for="(item, index) in category" :key="index" class="item">
						<view :class="'item-content '+((item.bg_color || null) == null ? 'item-exposed' : '')" :data-value="item.id" :data-index="index" @tap="category_event" :style="((item.bg_color || null) == null ? '' : 'background-color:'+item.bg_color+';')">
							<image :src="item.images_url" mode="aspectFit"></image>
						</view>
						<view class="title" :class="(category_active == item.id) ? 'on' : ''" :data-value="item.id" :data-index="index" @tap="category_event">{{item.name}}</view>
					</view>
				</view>
			</view>
			
			<!-- 魔方-导航下方 - 插件 -->
			<block v-if="(plugins_fccprouniapp_mofang || null) != null">
				<component-mofang :propData="plugins_fccprouniapp_mofang" propLocation="22"></component-mofang>
			</block>
			
			<view class="listings">
				<view class="listings-box">
					<scroll-view scroll-x class="tab-scroll" :scroll-x="true" :show-scrollbar="false">
						<view class="tab-list">
							<view v-for="(item, index) in index_data" :key="index" class="tab-item" :style="(activeTab === index) ? 
							'border-bottom:2px solid '+diytheme.main_color+';font-size:32rpx;font-weight:bold;line-height:55rpx;' : ''" @tap="setActiveTab(index)">{{ item.title }}</view>
						</view>
					</scroll-view>
				</view>
			</view>
			<view :class="'listing-content listing-content-'+data_base.index_list_style">
				<block v-for="(item, index) in index_data" :key="index">
					<view :style="(activeTab === index) ? 'display:block;' : 'display:none'">
						<block v-if="index==0">
							<view v-for="(item2, index2) in data_list_0" :key="item2.id">
							    <component-company-item :propConfig="data_base" :propData="item2"></component-company-item>
							</view>
						</block>
						<block v-if="index==1">
							<view v-for="(item2, index2) in data_list_1" :key="item2.id">
							    <component-company-item :propConfig="data_base" :propData="item2"></component-company-item>
							</view>
						</block>
					</view>
				</block>
			</view>

			<!-- 结尾 -->
			<component-bottom-line :propStatus="data_bottom_line_status"></component-bottom-line>
			
			<!-- 分享弹窗 -->
			<component-share-popup :diyTheme="diytheme" ref="share"></component-share-popup>
			
			<!-- 公共 -->
			<component-common ref="common" :propIsGrayscale="(data_base.is_show_mourning || 0) == 1"></component-common>
		</view>
		<view v-else>
			<!-- 提示信息 -->
			<component-no-data :propStatus="data_list_loding_status" :propMsg="data_list_loding_msg"></component-no-data>
		</view>
		<!-- 发布、我的入口 -->
		<component-classinfo-footer :propBaseData="data_base"></component-classinfo-footer>
    </view>
</template>
<script>
    const app = getApp();
    import componentNoData from '@/components/no-data/no-data';
    import componentBottomLine from '@/components/bottom-line/bottom-line';
	import componentClassinfoFooter from '../public/footer';
	import componentTjHeader from "../public/tj-header/tj-header";
	import componentSharePopup from "@/components/share-popup/share-popup";
	import componentMofang from "@/components/mofang/mofang";
	import componentTjClassinfoList from '@/components/tj-classinfo-list/tj-classinfo-list';
	import {system_base_info, clear_user_cach} from "@/common/js/common/common";
	import componentCompanyItem from '../public/company-item';
	import componentCommon from '@/components/common/common';
	
	// 获取系统状态栏的高度
	var system_info = app.globalData.get_system_info() || {};
	var win_width = parseInt(system_info.windowWidth || system_info.screenWidth || 0);
	var bar_height = parseInt(system_info.statusBarHeight || 0);
	
	let menuButtonInfo = {};
	// 如果是小程序，获取右上角胶囊的尺寸信息，避免导航栏右侧内容与胶囊重叠(支付宝小程序非本API，尚未兼容)
	// #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-QQ || MP-ALIPAY
	menuButtonInfo = uni.getMenuButtonBoundingClientRect();
	// #endif
	
    export default {
        data() {
            return {
				plugins_fccprouniapp_data: null,
				diytheme: null,
				random_value: 0,
				load_status: 0,
				data_is_loading: 0,
				data_bottom_line_status: false,
				data_list_loding_status: 1,
				data_list_loding_msg: '',
				
				data_list_0: [],
				data_total_0: 0,
				data_page_total_0: 0,
				data_page_0: 1,
				
				data_list_1: [],
				data_total_1: 0,
				data_page_total_1: 0,
				data_page_1: 1,
				
				index_data: null,
				cid: 0,// 公司分类ID
				
				// 自定义分享信息
				share_info: {},
				common_app_is_header_nav_fixed: 0,
				common_app_is_enable_search: 0,
				user_temp:null,
				
				// 顶部+搜索样式配置
				search_is_fixed: 0,
				scrollTop: 0,
				backbottom: 140,
				bottomsafetemp: 0,
				// 顶部导航信息
				// #ifdef MP || APP-PLUS
				top_nav_icon_top_value: bar_height + 8,
				// #endif
				// #ifdef H5
				top_nav_icon_top_value: 6,
				// #endif
                
				params: null,
				post_data: null,
                slide_list: [],
                data_base: null,
                category: [],
				category_active: 0,
				right_icon_list: [],
				plugins_fccprouniapp_mofang: null,

				// 是否单页预览
				is_single_page: app.globalData.is_current_single_page() || 0,
				static_url: app.globalData.get_static_url('home'),
				
				activeTab: 0,
				// 用户位置信息
				user_location: {},
				plugins_fccprouniapp_mofang: null,
            };
        },

        components: {
            componentNoData,
            componentBottomLine,
			componentTjClassinfoList,
			componentClassinfoFooter,
			componentTjHeader,
			componentSharePopup,
			componentCompanyItem,
			componentMofang,
			componentCommon
        },

        onLoad(params) {
			// 调用公共事件方法
			app.globalData.page_event_onload_handle(params);
			
			// 参数处理
			params = app.globalData.launch_params_handle(params);
			
			// 设置参数
			this.setData({
				params: params,
				post_data: {
					wd: params.keywords || ''
				}
			});
			
        	// 数据加载
        	this.init(); 
        },

        onShow() {
			app.globalData.page_event_onshow_handle();
			
			// 用户位置初始化
			this.user_location_init();
        },

        // 下拉刷新
        onPullDownRefresh() {
			this.setData({
				data_page_0: 1,
				data_page_1: 1,
				data_list_0: [],
				data_list_1: [],
				data_bottom_line_status: false,
				data_is_loading: 0,
			});
			// 数据加载
			this.get_data_list();
        },
		// 页面滚动监听
		async onPageScroll(e) {
			this.scrollTop = e.scrollTop;
			// #ifdef APP-NVUE
			this.scrollTop = e.detail.scrollTop;
			// #endif
			if(this.data_is_loading == 0){
				var pagetop = e.scrollTop > 100 ? 101 : e.scrollTop;
				if(pagetop > 100)
				{
					this.get_data_list();
				}
			}
		    if(this.common_app_is_header_nav_fixed == 1 && this.common_app_is_enable_search == 1) {
		        var top = e.scrollTop > 35 ? 35 : e.scrollTop;
		        var num = top*7;
		        var base = 230;
		        // #ifdef MP-ALIPAY
		            base = 235
		        // #endif
		        // #ifdef H5 || MP-TOUTIAO || APP-PLUS
		            var len = (this.right_icon_list || []).length;
		            base = (len <= 0) ? 0 : 66*len;
		        // #endif
		        // 开启哀悼插件的时候不需要浮动导航并且搜索框也不需要缩短、开启站点灰度会导致浮动失效
		        if((this.data_base.is_show_mourning || 0) == 1) {
		            var top_val = 35;
		            var val = (num > base) ? base : num;
		            // #ifdef MP-TOUTIAO
		                top_val = 0;
		                val = base
		            // #endif
		            this.setData({
		                //search_style: 'width: calc(100% - '+val+'rpx);',
		                search_is_fixed: (top >= top_val) ? 1 : 0,
		            });
		        }
		    }
		},
        methods: {
			setActiveTab(tab) {
			    this.activeTab = tab;
				this.data_bottom_line_status = false;
				if((tab == 0 && this.data_page_0 == 1 && this.data_list_0.length == 0) || (tab == 1 && this.data_page_1 == 1 && this.data_list_1.length == 0))
				{
					this.get_data_list();
				}
			},
			// 开始
			init(is_mandatory = 0){
				system_base_info()
				.then(data=>{
					this.init_before(data)
					.then(()=>{
						this.init_real();
					});
				});
			},
			
			// 设置本页参数
			init_before(data){
				var self = this;
				return new Promise((resolve, reject) => {
					let open_search = app.globalData.get_config('config.common_app_is_enable_search');
					var backbottom = 140;
					let bottomsafetemp = 0;
					if (this.safeAreaInsets && this.safeAreaInsets.hasOwnProperty('bottom'))
					{
						bottomsafetemp = parseInt(this.safeAreaInsets.bottom/2);
					}

					self.setData({
						lang_info: data.system_lang_info,
						diytheme: data.diytheme,
						common_app_is_enable_search: open_search,
						common_app_is_header_nav_fixed: parseInt(app.globalData.get_config('config.common_app_is_header_nav_fixed')),
						user_temp: uni.getStorageSync(app.globalData.data.cache_user_info_key) || null,
						backbottom: backbottom,
						bottomsafetemp: bottomsafetemp,
					});
					resolve();
				});
			},
			
            // 得到分类的基础数据
            init_real(params = {}) {
				var self = this;
            	return new Promise((resolve, reject) => {
            		var upd_data = null;
            		uni.request({
						url: app.globalData.get_request_url('shoppage', 'shop', 'classinfo'),
            			method: 'POST',
            			data: self.post_data,
            			dataType: 'json',
            			success: res => {//console.log('index-index-data-');console.log(res.data);
            				// 设置首次加载状态
            				this.setData({
            					load_status: 1
            				});
            				if (res.data.code == 0) {
            					var data = res.data.data;
								
								// 数据列表
								if (this.data_page_0 <= 1) {
								    var temp_data_list_0 = data.data[0].data.data || [];
								} else {
								    var temp_data_list_0 = this.data_list_0 || [];
								    var temp_data_0 = data.data[0].data.data;
								    for (var i in temp_data_0) {
								        temp_data_list_0.push(temp_data_0[i]);
								    }
								}
								if (this.data_page_1 <= 1) {
								    var temp_data_list_1 = data.data[1].data.data || [];
								} else {
								    var temp_data_list_1 = this.data_list_1 || [];
								    var temp_data_1 = data.data[1].data.data;
								    for (var i in temp_data_1) {
								        temp_data_list_1.push(temp_data_1[i]);
								    }
								}
								
								var share_info = {
									title: data.base.shop_page_title || this.$t('pages.fcc-classinfo-companyshop'),
									desc: data.base.shop_page_desc || this.$t('pages.fcc-classinfo-companyshop'),
									path: '/pages/fcc/classinfo/companyshop/companyshop',
									img: (data.slide_list || null) != null && data.slide_list.length > 0 ? data.slide_list[0]['images_url'] : '',
								};
            					var udp = {
									random_value: Math.random(),
									index_data: data.data || null,
            						data_base: data.base || null,
            						category: data.category || [],
            						slide_list: data.slide_list || [],
									share_info: share_info,
									right_icon_list: data.right_icon_list || [],
									
									data_list_0: temp_data_list_0,
									data_total_0: data.data[0].data.total,
									data_page_total_0: data.data[0].data.page_total,
									data_page_0: this.data_page_0 + 1,
									
									data_list_1: temp_data_list_1,
									data_total_1: data.data[1].data.total,
									data_page_total_1: data.data[1].data.page_total,
									data_page_1: this.data_page_1 + 1,
									
									data_is_loading: 0,
									data_list_loding_status: temp_data_list_0.length > 0 ? 3 : 0,
									data_list_loding_msg: '',
									plugins_fccprouniapp_mofang: data.mofang || null,
            					};
								
            					this.setData(udp);

								// 标题
								uni.setNavigationBarTitle({ title: data.base.shop_page_title || this.$t('pages.fcc-classinfo-companyshop')});
								
								// 分享菜单处理
								app.globalData.page_share_handle();
            					
            					resolve(data); 
            				} else {
            					app.globalData.showToast(res.data.msg);
            					reject(res.data.msg);
            				}
            			},
            			fail: () => {
            				uni.stopPullDownRefresh();
            				this.setData({
            					load_status: 1
            				});
            				app.globalData.showToast(this.$t('common.internet_error_tips'));
            				reject('10004');
            			}
            		});
            	});
            },
			
			// 点击公司分类事件
			category_event(e){
				//console.log(e);
				var value = e.currentTarget.dataset.value;
				var post_data = this.post_data;
				post_data['category_id'] = value;
				this.setData({
					category_active: value,
					post_data: post_data,
					data_page_0: 1,
					data_page_1: 1,
					data_list_0: [],
					data_list_1: [],
					data_bottom_line_status: false,
					data_is_loading: 0,
				});
				// 数据加载
				this.get_data_list();
			},
			
			// 开始无限调用
			// 获取数据
			get_data_list(is_mandatory) {
			    // 分页是否还有数据
			    if ((is_mandatory || 0) == 0) {
			        if (this.data_bottom_line_status == true) {
			            uni.stopPullDownRefresh();
			            return false;
			        }
			    }
			    
			    // 是否加载中
			    if(this.data_is_loading == 1) {
			        return false;
			    }
			    this.setData({
			        data_is_loading: 1,
			        data_list_loding_status: 1
			    });

				var at = parseInt(this.activeTab);
				var post_data = this.post_data;
				var now_page = this.data_page_0;
			    if(at == 1)
				{
					now_page = this.data_page_1;
					post_data['page'] = this.data_page_1;
					post_data['is_location'] = 1;
				}else{
					// 检查属性是否存在
					if (post_data.hasOwnProperty("is_location")) {
					    // 删除属性
					    delete post_data.is_location;
					}
					post_data['page'] = this.data_page_0;
				}
				
				// 加载loding
				if(now_page > 1) {
				    /*uni.showLoading({
				        title: this.$t('common.loading_in_text'),
				    });*/
				}
				
			    // 获取数据
			    uni.request({
			        url: app.globalData.get_request_url("shoplist", "shop", "classinfo"),
			        method: 'POST',
			        data: post_data,
			        dataType: 'json',
			        success: res => {//console.log('----->请求参数及结果');console.log(post_data);console.log(res);
						if (now_page > 1) {
						    uni.hideLoading();
						}
			            uni.stopPullDownRefresh();
			            if (res.data.code == 0) {
			                // 数据列表
			                var data = res.data.data;
							if(at == 1)
							{
								if (now_page <= 1) {
								    var temp_data_list = data.data || [];
								} else {
								    var temp_data_list = this.data_list_1 || [];
								    var temp_data = data.data;
								    for (var i in temp_data) {
								        temp_data_list.push(temp_data[i]);
								    }
								}
							}else{
								if (now_page <= 1) {
								    var temp_data_list = data.data || [];
								} else {
								    var temp_data_list = this.data_list_0 || [];
								    var temp_data = data.data;
								    for (var i in temp_data) {
								        temp_data_list.push(temp_data[i]);
								    }
								}
							}
			                var upd = {
			                    data_list_loding_status: temp_data_list.length > 0 ? 3 : 0,
			                    data_list_loding_msg: '',
			                    data_is_loading: 0,
			                };
							
							if(at == 1)
							{
								upd['data_list_1'] = temp_data_list;
								upd['data_total_1'] = data.total;
								upd['data_page_total_1'] = data.page_total;
								upd['data_page_1'] = this.data_page_1 + 1;
							}else{
								upd['data_list_0'] = temp_data_list;
								upd['data_total_0'] = data.total;
								upd['data_page_total_0'] = data.page_total;
								upd['data_page_0'] = this.data_page_0 + 1;
							}
							this.setData(upd);
							if(at == 1)
							{
								// 是否还有数据
								this.setData({
								    data_bottom_line_status: this.data_page_1 > 1 && this.data_page_1 > this.data_page_total_1,
								});
							}else{
								// 是否还有数据
								this.setData({
								    data_bottom_line_status: this.data_page_0 > 1 && this.data_page_0 > this.data_page_total_0,
								});
							}
			            } else {
			                this.setData({
			                    data_list_loding_status: 2,
			                    data_list_loding_msg: res.data.msg,
			                });
			                app.globalData.is_login_check(res.data, this, 'get_data_list');
			            }
			        },
			        fail: () => {
			            if(this.data_page > 1) {
			                uni.hideLoading();
			            }
			            uni.stopPullDownRefresh();
			            this.setData({
			                data_list_loding_status: 2,
			                data_is_loading: 0,
			                data_list_loding_msg: this.$t('common.internet_error_tips'),
			            });
			        }
			    });
			},
			
			// 选择用户地理位置回调
			user_back_choice_location(e) {
				// 设置数据
				this.setData({
				    user_location: e
				});
				// 重新刷新数据
				this.init();
			},
			
			// 地址信息初始化
			user_location_init() {
			    var res = app.globalData.choice_user_location_init();
			    this.setData({
			        user_location: res
			    });
			},
			
			// 分享开启弹层
			popup_share_event(e) {
				if ((this.$refs.share || null) != null) {
					this.$refs.share.init({
						status: true,
						share_info: app.globalData.share_content_handle({})
					});
				}
			},
			
			// 返回事件
			top_nav_left_back_event(e) {
			    app.globalData.page_back_prev_event();
			},

            // url事件
            url_event(e) {
                app.globalData.url_event(e);
            },
        },
    };
</script>
<style>
    @import './companyshop.css';
</style>
